Home > Controls > Create an items control

Create an items control

Items controls have an Items property that can contain a collection of child elements. You can add child elements of any type to the items collection, or you can display an array of items from a data source by using data binding.  Items controls have no content property and no header property. Child elements are added into the items host of the items control which, in the case of a ListBox, is a Stack panel that arranges the items in a vertical stack. You will not see the items host under Objects and Timeline in Blend unless you are editing the template of the items control.

The following procedure shows you how to create an items control (a ListBox) and add elements to the items collection. This procedure can also be used with other items controls that are listed under Types in the topic "ItemsControl Types" on MSDN. If you want to display an array of items from a data source, see the topic Creating an RSS news reader in this User Guide.

To create an items control

1. In the Toolbox along the left side of Microsoft Expression® Blend, click the Asset Library button . In the Controls tab, click System Controls (if it is not already selected), and select ListBox from the list.
   The icon for the ListBox control appears above the Asset Library button, and is selected, ready for you to add a ListBox to the artboard.

   The most common UI elements (such as the Button control) are already displayed in drop-down lists above the Asset Library button so that you can add them quickly.

2. To add a button to the artboard, double-click the Toolbox icon for the ListBox control.

   

   A ListBox object created on the artboard at its default size and location (top-left)

   You can also add a control to the artboard by selecting the control in the Toolbox and then clicking on the artboard and dragging your mouse to specify the control's bounding box.

   After a UI design element, such as a ListBox control, is added to the artboard, it becomes an object in your application.

3. Under Objects and Timeline, double-click the ListBox object to make it the activated element. Notice that a yellow highlight appears around the element. Activating an object enables you to add a child element.

   You can also activate an object on the artboard by first selecting the Selection tool from the Toolbox, and then double-clicking on the object on the artboard.

4. Draw several shapes into the ListBox using elements from the Toolbox such as the TextBlock , Button , or Rectangle . Notice how the list box arranges these child elements in a vertical stack:

   

   Child objects added to a ListBox object

   If you add more elements than will fit into the items control, then a scrollbar will appear when you run your application, allowing you to view the extra elements.

   You can reorder elements in the list by dragging and dropping the objects under Objects and Timeline, or select the Selection tool to drag and drop them on the artboard.

5. You can view the items in your ListBox and add others in the Collection Editor window. To open the Collection Editor, click the button next to the Items (Collection) property in the Properties Panel.
6. Build your project (F5) to see the resulting application.